<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>聊天</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				margin: 0;
			}
			.card-content{
				margin: 0.625rem;
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: large;
				color:#A78369;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
				font-size: medium;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.leavemessage{
				font-size :0.6rem;
			}
			.link{
				font-size :0.6875rem;
				font-weight: bold;
			}
			.name{
				padding-left: 4rem;
			}
			.nickname{
				padding-left: 4rem;
				font-size :small;
			}
			.info{
				color: white;
				padding-left: 1.25rem;
				font-size :medium;
				font-weight: bold;
			}
			.bar{
				background-color: rgb(54,53,61);
			}
			.inform-top span{
				color: #ffffff;
			}
			/* 底部定位 */
			.bar .searchbar{
				bottom: 0;
			}
			.bar-tab{
				height: 2.3rem;
			}
			/* 底部颜色 */
			.bar .searchbar{
				padding: 0.4rem;
				padding-top: 0.4rem;
				background-color: rgb(244,243,248);
				height: 100%;
			}
			.bar .searchbar .search-input{
				margin-left: 0.3rem;
				height: 100%;
				width: 76%;
			}
			.bar .searchbar input{
				height: 100%;
				font-size: 0.8rem;
				color: #000000;
				background-color:rgb(252,252,252);
			}
			.bar .searchbar span{
				font-size: 1rem;
				margin-left: 2%;
			}
			.bar .searchbar .col-10{
				margin-left: 0.4rem;
				position: relative;
			}
			/* 对方消息样式 */
			.userMesage{
				padding: 0.5rem 0;
				padding-bottom: 0.5rem;
			}
			.userMesage,.myMesage{
				position: relative;
			}
			.userMesage .photo{
				height: 2rem;
				position: absolute;
				left: 0rem;
			}
			.userMesage .photo img{
				height: 100%;
				width: 2rem;
			}
			.userMesage .userContent{
				word-wrap:break-word;
				width:auto;
				display:inline-block !important; 
				display:inline; 
				max-width: 67%;
				background-color: #E3E3E3;
				min-height: 1.7rem;
				margin-left: 0.5rem;
				border-radius: 0.5rem;
				padding: 0.3rem;
				font-size: 0.75rem;
				margin-left: 16%;
			}
			/* 自己消息 */
			.myMesage{
				padding: 0.5rem 0;
				padding-bottom: 0.5rem;
				text-align:right;
			}
			.myMesage .photo{
				height: 2rem;
				position: absolute;
				right: 0rem;
				top: 0.5rem;
			}
			.myMesage .photo img{
				height: 100%;
				width: 2rem;
			}
			.myMesage .userContent{
				word-wrap:break-word;
				width:auto; 
				display:inline-block !important; 
				display:inline; 
				max-width: 67%;
				min-height: 1.7rem;
				margin-left: 0.5rem;
				background-color: rgb(163,230,95);
				border-radius: 0.5rem;
				padding: 0.3rem;
				font-size: 0.75rem;
				margin-right: 16%;
				text-align:right;
			}
			#mess .userContent img{
				width: 100%;
			}
			/* 图片窗口 */
			#addImg {
				position: absolute;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
			.date{
				color: #F1F1F1;
				font-size: xx-small;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
		</style>
		<style type="text/css">
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 底部发送栏 -->
			<nav class="bar bar-tab">
				<div class="searchbar row">
				    <div class="search-input col-85">
				      <input type="search" id='search'/>
				    </div>
					<div class="col-15">
						<a href="#" @click="submitChat">
							<span class="iconfont icon-sent"></span>
						</a>
					</div>
				</div>
			</nav>
			
			<!-- 这里是页面内容区 -->
			<div class="content">
				<!-- 顶部用户信息 -->
				<div class="card facebook-card" style="background-color:white" v-if="user!=null&&commodity!=null">
					<a class="icon icon-left" @click="goBack" style="color:black"></a>
					<span class="commodity-title">{{user.nickname}}</span>
					<div class="no-border " v-if="commodity.userId!=loginuser.id"
					style="width: 5rem;float:right;margin-right: 0.625rem;
					margin-top: 2rem;z-index: 20000;position: absolute;top: 0.4rem;right: 0rem;">
						<a  @click="goBuy" class="button button-small button-fill button-danger">
							立即购买
						</a>
					</div>
					<div class="card-header no-border">
						<div class="facebook-avatar">
						  <img :src="imgSrc(commodity.picture)" width="58" height="50">
						</div>
				      <div class="name" >￥{{commodity.price}}</div>
				      <div class="nickname " v-if="commodity.freightStatus==1">运费：￥10</div>
					  <div class="nickname " v-if="commodity.freightStatus==0">运费：￥0</div>
					  
				    </div>
				</div>
				<!-- 主内容 -->
				<div class="list-block">
					<div v-for="talk in talks" v-if="talk!=null&user!=null">
						<div class="userMesage" v-if="talk.senduserId==user.id">
							<div class="photo">
								<img :src="imgSrc(user.photo)" >
							</div>
							<div class="userContent">
								<span id="" style="width: 100%; height: 100%;">
									{{talk.talk}}
								</span>
							</div>
							<span class="date">{{talk.date}}</span>
						</div>
						<div class="myMesage" v-if="talk.senduserId==loginuser.id">
							<span class="date">{{talk.date}}</span>
							<div class="userContent">
								{{talk.talk}}
							</div>
							<div class="photo">
								<img :src="imgSrc(loginuser.photo)" >
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var loginuserid = getUrlParam('loginuserid');
			var commodityid = getUrlParam('commodityid');
			var userid = getUrlParam('userid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					loginuser:null,
					commodity:null,
					user:null,
					talks:[]
				},
				created() {
					//初始加载登录用户
					this.initloginuser();
					//初始加载商品
					this.initcommodity();
					//初始加载对话用户
					this.inituser();
					//初始化加载所有聊天内容
					this.inittalks();
				},
				// 方法
				methods:{
					initloginuser: function() {
						axios.get(serviceIP+"/market/inituser?userid=" + loginuserid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginuser = result.data.data;
						});
					},
					initcommodity: function() {
						axios.get(serviceIP+"/market/initcommodity?commodityid=" + commodityid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.commodity = result.data.data;
						});
					},
					inituser: function() {
						axios.get(serviceIP+"/market/inituser?userid=" + userid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.user = result.data.data;
						});
					},
					inittalks:function() {
						axios.get(serviceIP+"/market/inittalks?loginuserid="+loginuserid
							+"&commodityid="+commodityid+"&userid=" + userid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.talks = result.data.data;
						});
					},
					
					//跳转上层打开页面
					goBack:function(){
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//跳到购买页
					goBuy: function(){
						//alert("aaa")
						if(this.commodity.status==1){
							$.toast("商品已被卖出，无法购买！");
						}else if(this.commodity.status==2){
							$.toast("商品已删除！");
						}else{
							window.location="market-placeorder.html?loginuserid="+loginuserid
							+"&commodityid="+commodityid
						}
					},
					//发送消息
					submitChat:function(){
						var mes=$("#search").val();
						if(mes.length==0){
							$.toast("信息不能为空！");
							return;
						}
						axios.get(serviceIP+"/market/submittalk", {
							params: {
								loginuserid:loginuserid,
								commodityid:commodityid,
								userid:userid,
								talk:mes
							},
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							if (result.data.code == 200) {
								//重新加载所有聊天内容
								this.inittalks();
								$("#search").val("");
							} else {
								$.toast("啊呀发布中途出现小问题啦");
							}
						});
					},
					
				},
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>

</html>
